<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>大宗B2B商城</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3B82F6',
                        secondary: '#64748B',
                        accent: '#10B981'
                    }
                }
            }
        }
    </script>
    <style>
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden; /* 隐藏页面滚动条 */
        }
        .portal-container {
            height: calc(100vh - 64px); /* 调整高度以适应顶部菜单 */
            overflow: hidden; /* 隐藏容器滚动条 */
        }
        .nav-item:hover {
            background-color: #EFF6FF;
        }
        .active-nav {
            background-color: #DBEAFE;
            border-bottom: 2px solid #3B82F6;
        }
        /* 确保iframe填满整个容器且无滚动条 */
        #mainFrame {
            width: 100%;
            height: 100%;
            border: 0;
            overflow: hidden;
        }
        .dropdown:hover .dropdown-menu {
            display: block;
        }
        .category-card {
            transition: all 0.3s ease;
        }
        .category-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
        }
        .product-card {
            transition: all 0.3s ease;
        }
        .product-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        }
    </style>
</head>
<body class="bg-gray-100">
    <!-- 顶部导航 -->
    <header class="sticky top-0 z-50 bg-white shadow-sm">
        <div class="container mx-auto px-4">
            <div class="flex items-center justify-between h-16">
                <!-- Logo -->
                <div class="flex items-center">
                    <a href="#" class="flex items-center">
                        <i class="fas fa-industry text-blue-600 text-2xl mr-2"></i>
                        <span class="text-xl font-bold text-blue-600">大宗B2B商城</span>
                    </a>
                    <!-- 主导航 -->
                    <nav class="hidden md:flex ml-10">
                        <ul class="flex space-x-1">
                            <li><a href="#" class="px-4 py-2 text-blue-600 border-b-2 border-blue-600 font-medium" onclick="loadPage('home.html')">首页</a></li>
                            <li><a href="#" class="px-4 py-2 text-gray-500 hover:text-blue-600 transition-colors" onclick="loadPage('products.html')">现货大厅</a></li>
                            <li><a href="#" class="px-4 py-2 text-gray-500 hover:text-blue-600 transition-colors" onclick="loadPage('suppliers.html')">供应商</a></li>
                            <li><a href="#" class="px-4 py-2 text-gray-500 hover:text-blue-600 transition-colors" onclick="loadPage('contracts.html')">采购中心</a></li>
                            <li><a href="#" class="px-4 py-2 text-gray-500 hover:text-blue-600 transition-colors" onclick="loadPage('news.html')">行情资讯</a></li>
                            <li><a href="#" class="px-4 py-2 text-gray-500 hover:text-blue-600 transition-colors" onclick="loadPage('ware.html')">发布商品</a></li>
                            <li><a href="#" class="px-4 py-2 text-gray-500 hover:text-blue-600 transition-colors" onclick="loadPage('map.html')">含量分布</a></li>
                        </ul>
                    </nav>
                </div>
                
                <!-- 用户操作区 -->
                <div class="flex items-center space-x-4">
                    <div class="relative hidden md:block">
                        <input type="text" placeholder="搜索商铺或产品" class="pl-10 pr-4 py-2 rounded-full border border-gray-200 focus:outline-none focus:border-blue-600 focus:ring-1 focus:ring-blue-600 w-64 text-sm">
                        <i class="fas fa-search absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
                    </div>
                    <a href="#" class="text-gray-500 hover:text-blue-600 transition-colors" onclick="loadPage('cart.html')">
                        <i class="fas fa-shopping-cart text-lg"></i>
                    </a>
                    <a href="#" class="flex items-center text-gray-500 hover:text-blue-600 transition-colors" onclick="loadPage('profile/index.html')">
                        <i class="fas fa-user text-lg mr-1"></i>
                        <span class="hidden md:inline">我的账户</span>
                    </a>
                    <button class="md:hidden text-gray-500 hover:text-blue-600">
                        <i class="fas fa-bars text-xl"></i>
                    </button>
                </div>
            </div>
        </div>
    </header>

    <!-- 主内容区域 -->
    <main class="p-6 portal-container">
        <iframe id="mainFrame" src="home.html" class="w-full h-full border-0 rounded-lg shadow"></iframe>
    </main>

    <script>
        function loadPage(page) {
            document.getElementById('mainFrame').src = page;
            
            // 更新导航激活状态
            document.querySelectorAll('nav ul li a').forEach(item => {
                item.classList.remove('border-b-2', 'border-blue-600', 'font-medium');
                item.classList.add('text-gray-500');
            });
            
            // 为当前点击的导航项添加激活状态
            if (event && event.currentTarget) {
                event.currentTarget.classList.remove('text-gray-500');
                event.currentTarget.classList.add('border-b-2', 'border-blue-600', 'font-medium');
            }
        }
    </script>
</body>
</html>